<template>
  <el-main>
    <el-row>
      <el-card :body-style="{ padding: '0px' }">
        <el-table
            :data="myCarts.skuVoList"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              width="150">
            <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fit"></el-image>
          </el-table-column>
          <el-table-column
              prop="title"
              label="商品标题"
              width="300">
          </el-table-column>
          <el-table-column
              prop="brandName"
              label="品牌"
              width="150">
          </el-table-column>
          <el-table-column
              label="规格"
              width="150">
            <template slot-scope="scope">
              <el-row v-for="item in scope.row.groupVOS">
                <el-col v-for="prop in item.paramVOS">
                  {{prop.name}}:{{prop.value}}
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              prop="number"
              label="选购个数"
              width="150">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="130">
          </el-table-column>
          <el-table-column
              prop="total"
              label="金额"
              width="100">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.number" @change="handleChange(scope.row.id,scope.row.number)" :min="0" label="描述文字"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
              width="80">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteBySkuId(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
          <span style="font-weight: bold">总金额:</span><span style="color: red">{{myCarts.total}}</span>&emsp;
        <el-button type="primary" round size="mini" @click="toCreateOrder">结算</el-button>
      </el-card>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "CartView",
  data() {
    return{
      myCarts:[],
      orderDto:{
        skuIds:[],
      }
    }
  },
  methods:{
    toCreateOrder() {
      if (this.orderDto.skuIds.length == 0) {
        this.$message.info("请先选中一项哦");
        return;
      }
      this.axios.post(this.$shopHost + 'api/order/createOrder',this.orderDto).then(res => {
        if (res.data.result) {
          // 成功 -> 订单
          let str = JSON.stringify(res.data.data);
          this.$router.push('/order/'+res.data.data);
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleSelectionChange(val) {
      this.orderDto.skuIds = val.map(a=>{
        return a.id;
      });
    },
    deleteBySkuId(skuId) {
      this.change.skuId = skuId;
      this.axios.post(this.$shopHost + 'api/cart/deleteBySkuId',this.change).then(res=>{
        if (res.data.result) {
          // 成功
          this.$message.success("操作成功");
          this.getMyCart();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    handleChange(skuId,number) {
      this.change.skuId = skuId;
      this.change.number = number;
      this.axios.post(this.$shopHost + 'api/cart/changeCart',this.change).then(res=>{
        if (res.data.result) {
          // 成功
          this.$message.success("操作成功");
          this.getMyCart();
        }else{
          this.$message.error(res.data.msg);
        }
      });
    },
    getMyCart() {
      this.axios.get(this.$shopHost + 'api/cart/getMyCart').then(res=>{
        this.myCarts = res.data.data;
      });
    },
    getUserInfo() {
      this.axios.get(this.$shopHost + 'api/user/getLoginUser').then(res=>{
        if (!res.data.result) {
          // 用户未登录
          this.$router.replace('/');
        }else{
          this.getMyCart();
        }
      });
    },
  },
  created() {
    // 判断用户是否登录
    this.getUserInfo();
  }
}
</script>

<style scoped>

</style>